Vue CSS Binding

স্টাইল এবং ক্লাস অ্যাট্রিবিউট সহ সিএসএস পরিবর্তন করতে কীভাবে ভি-বাইন্ড ব্যবহার করবেন সে সম্পর্কে আরও জানুন।

ভি-বাইন্ডের সাথে শৈলী এবং শ্রেণির বৈশিষ্ট্যগুলি পরিবর্তন করার ধারণাটি মোটামুটি সোজা, তবে বাক্য গঠনে কিছুটা অভ্যস্ত হতে পারে।

Dynamic CSS in Vue

আপনি ইতিমধ্যেই দেখেছেন কিভাবে আপনি স্টাইল এবং ক্লাস অ্যাট্রিবিউটে ভি-বাইন্ড ব্যবহার করে CSS পরিবর্তন করতে Vue ব্যবহার করতে পারেন। v-bind-এর অধীনে এই টিউটোরিয়ালে এটি সংক্ষিপ্তভাবে ব্যাখ্যা করা হয়েছে এবং Vue CSS পরিবর্তন করার কয়েকটি উদাহরণ দেওয়া হয়েছে।

এখানে আমরা আরও বিস্তারিতভাবে ব্যাখ্যা করব কিভাবে CSS কে Vue দিয়ে গতিশীলভাবে পরিবর্তন করা যায়। তবে প্রথমে এই টিউটোরিয়ালে আমরা দুটি উদাহরণ দেখেছি: v-bind:style সহ ইন-লাইন স্টাইলিং এবং v-bind:class সহ একটি ক্লাস বরাদ্দ করা

Inline Styling

Vue-তে ইন-লাইন স্টাইলিংয়ের জন্য আমরা v-bind:style ব্যবহার করি।

🎯 Example

একটি <input type="range"> উপাদান একটি <div> উপাদানের অস্বচ্ছতা পরিবর্তন করতে ইন-লাইন স্টাইলিং ব্যবহার করে ব্যবহার করা হয়।

<input type="range" v-model="opacityVal">
<div v-bind:style="{ backgroundColor: 'rgba(155,20,20,'+opacityVal+')' }">
  Drag the range input above to change opacity here.
</div>

Assign a Class

Vue-তে আমরা একটি HTML ট্যাগে একটি ক্লাস বরাদ্দ করতে v-bind:class ব্যবহার করি।

🎯 Example

খাবারের ছবি নির্বাচন করুন। আপনি কি নির্বাচন করেছেন তা দেখানোর জন্য নির্বাচিত খাবারটি v-bind:class ব্যবহার করে হাইলাইট করা হয়েছে।

<div v-for="(img, index) in images">
  <img v-bind:src="img.url"
       v-on:click="select(index)"
       v-bind:class="{ selClass: img.sel }">
</div>

Other Ways to Assign Classes and Style

এখানে v-bind:class এবং v-bind:style ব্যবহার সম্পর্কিত কিছু ভিন্ন দিক রয়েছে যা আমরা এই টিউটোরিয়ালে আগে দেখিনি:

Vue ক্লাসগুলিকে আবদ্ধ করে যখন CSS ক্লাসগুলি class="" এবং v-bind:class="" উভয়ের সাথে একটি HTML ট্যাগে বরাদ্দ করা হয়।
এক বা একাধিক ক্লাস সহ একটি অবজেক্ট v-bind:class="{}" দিয়ে বরাদ্দ করা হয়। বস্তুর মধ্যে এক বা একাধিক ক্লাস সক্রিয় বা নিষ্ক্রিয় করা যেতে পারে।
ইন-লাইন স্টাইলিং (v-bind:style) সহ একটি CSS বৈশিষ্ট্য সংজ্ঞায়িত করার সময় উটের কেস পছন্দ করা হয়, তবে 'কাবুব-কেস' ব্যবহার করা যেতে পারে যদি এটি উদ্ধৃতির মধ্যে লেখা হয়।
CSS ক্লাস অ্যারে/অ্যারে এনকোডিং/সিনট্যাক্স ব্যবহার করে বরাদ্দ করা যেতে পারে

এই পয়েন্টগুলি নীচে আরও বিশদে ব্যাখ্যা করা হয়েছে।

1. Vue Merges 'class' And 'v-bind:class'

যখন একটি এইচটিএমএল ট্যাগ class="" এর সাথে বরাদ্দ করা একটি ক্লাসের অন্তর্গত হয় এবং v-bind:class=" সহ একটি ক্লাসেও বরাদ্দ করা হয়, Vue আমাদের ক্লাসগুলিকে আবদ্ধ করে।

🎯 Example

একটি <div> উপাদান দুটি শ্রেণীর অন্তর্গত: 'impClass' এবং 'yelClass'। 'গুরুত্বপূর্ণ' ক্লাসটি ক্লাস অ্যাট্রিবিউটের সাথে স্বাভাবিক উপায়ে সেট করা হয় এবং 'হলুদ' ক্লাসটি v-bind:class দিয়ে সেট করা হয়।

<div class="impClass" v-bind:class="{yelClass: isYellow}">
  This div belongs to both 'impClass' and 'yelClass'.
</div>

2. Assign More Than One Class With 'v-bind:class'

v-bind:class="{}" সহ একটি ক্লাসে একটি HTML উপাদান বরাদ্দ করার সময়, আপনি একাধিক ক্লাস আলাদা করতে এবং বরাদ্দ করতে একটি কমা ব্যবহার করতে পারেন।

🎯 Example

একটি <div> উপাদান 'impClass' এবং 'yelClass' শ্রেণীর অন্তর্গত বুলিয়ান Vue ডেটা বৈশিষ্ট্য 'isYellow' এবং 'isimportant' এর উপর নির্ভর করে।

<div v-bind:class="{yelClass: isYellow, impClass: isImportant}">
  This tag can belong to both the 'impClass' and 'yelClass' classes.
</div>

3. Camel case vs kebab case notation with 'v-bind:style'

ইন-লাইন স্টাইলিং (v-bind:style) দিয়ে Vue-তে CSS পরিবর্তন করার সময়, CSS অ্যাট্রিবিউটের জন্য ক্যামেল কেস নোটেশন ব্যবহার করার পরামর্শ দেওয়া হয়, তবে CSS অ্যাট্রিবিউটটি উদ্ধৃতিতে আবদ্ধ থাকলে আপনি 'কাবুব-কেস' ব্যবহার করতে পারেন।

🎯 Example

এখানে, আমরা একটি <div> উপাদানের জন্য CSS অ্যাট্রিবিউটগুলি ব্যাকগ্রাউন্ড-কালার এবং ফন্ট-ওয়েট দুটি ভিন্ন উপায়ে সেট করেছি: প্রস্তাবিত উপায়টি হল ক্যামেল কেস ব্যাকগ্রাউন্ড কালার, এবং অ-প্রস্তাবিত উপায় হল ``কাবাব-কেস'' উদ্ধৃতি 'ফন্ট-ওয়েট'। উভয় বিকল্প কাজ.

<div v-bind:style="{ backgroundColor: 'lightpink', 'font-weight': 'bolder' }">
  This div tag has pink background and bold text.
</div>

'ক্যামেল কেস' এবং 'কাবাব কেস' নোটেশন হল স্পেস বা বিরাম চিহ্ন ছাড়াই পরপর শব্দ লেখার উপায়।

ক্যামেল কেস নোটেশন হল যখন প্রথম শব্দ একটি ছোট হাতের অক্ষর দিয়ে শুরু হয় এবং প্রতিটি শব্দ একটি বড় হাতের অক্ষর দিয়ে শুরু হয়, যেমন 'backgroundColor' বা 'camelCaseNotation'। একে উট কেস বলা হয় কারণ প্রতিটি বড় অক্ষর উটের পিঠে কুঁজের মতো।
কাবাব কেস নোটেশন 'ব্যাকগ্রাউন্ড-কালার' বা 'কাবাব-কেস-নোটেশন'-এর মতো যখন শব্দগুলিকে ড্যাশ দ্বারা আলাদা করা হয় -। এটিকে কাবাব কেস বলা হয় কারণ লাইনগুলি 'শিশ কাবাব'-এ গল্ফের মতো দেখায়।

4. Array Syntax with 'v-bind:class'

আপনি একাধিক ক্লাস যোগ করতে v-bind:class সহ অ্যারে সিনট্যাক্স ব্যবহার করতে পারেন। আপনি Vue অ্যাট্রিবিউটের উপর নির্ভর করে এমন ক্লাস এবং অ্যারে সিনট্যাক্স সহ Vue অ্যাট্রিবিউটের উপর নির্ভর করে না এমন ক্লাস ব্যবহার করতে পারেন।

🎯 Example

এখানে, আমরা অ্যারে সিনট্যাক্স সহ CSS ক্লাস 'impClass' এবং 'yelClass' সেট করি। 'impClass' শ্রেণীটি গুরুত্বপূর্ণ একটি Vue বৈশিষ্ট্যের উপর নির্ভর করে এবং 'yelClass' শ্রেণী সর্বদা <div> উপাদানের সাথে সংযুক্ত থাকে।

<div v-bind:class="[{ impClass: isImportant }, 'yelClass' ]">
  This div tag belongs to one or two classes depending on the isImportant property.
</div>

Vue Exercises

Vue CSS বাইন্ডিং সম্পর্কে আপনার জ্ঞান পরীক্ষা করতে এই টিউটোরিয়ালটি চেষ্টা করুন।

❓ Vue.js HTML CSS ?

v-bind:class="impClass yelClass"

✗ ভুল! এই সিনট্যাক্সটি নিখুঁত নয় এবং অনেক ক্লাস এভাবে আলাদা করা যায় না

v-bind:class="{ impClass: isImportant, yelClass: isYellow }"

✓ ঠিক আছে! এই সিনট্যাক্স একটি অবজেক্ট ইনডেক্সে একাধিক ক্লাস বরাদ্দ করার জন্য বৈধ

v-bind:class="[impClass, yelClass]"

✗ ভুল! অ্যারে সিনট্যাক্স সঠিক, কিন্তু ক্লাসের নাম অবশ্যই উদ্ধৃতিতে বা Vue বৈশিষ্ট্যের সাথে সংযুক্ত হতে হবে

v-bind:style="{ impClass: isImportant, yelClass: isYellow }"

✗ ভুল! v-bind:style শুধুমাত্র CSS শৈলীর জন্য, CSS ক্লাস নয়

পূর্ববর্তী পরবর্তী